import { ref } from "vue";
import print from "print-js";

export const usePrint = () => {
  const receiptContent = ref<any>(null);

  // 获取页面中的样式
  const getPageStyles = () => {
    const styles: any[] = [];

    // 查找页面中的所有样式标签和链接标签
    document
      .querySelectorAll('style, link[rel="stylesheet"]')
      .forEach((styleElement) => {
        styles.push(styleElement.outerHTML);
      });

    return styles.join(" ");
  };

  // 打印方法
  const handlePrint = () => {
    if (receiptContent.value) {
      // 获取DOM元素
      const element = receiptContent.value.$el || receiptContent.value;
      
      if (!element) {
        console.error('打印元素不存在');
        return;
      }
      
      const htmlContent = element.innerHTML; // 获取渲染的 DOM 内容
      const styles = getPageStyles(); // 获取页面样式

      console.log('打印内容长度:', htmlContent.length);
      
      // 使用 print-js 打印
      print({
        printable: `<div class="print-container">${styles}<div class="page-body">${htmlContent}</div></div>`, // 将样式和内容组合
        type: "raw-html",
        targetStyles: ["*"], // 保留所有样式
        style: `
          @page { size: A4; margin: 10mm; }
          body { font-size: 12px; }
          .print-container { width: 100%; }
          .page-body { background: #fff; width: 100%; }
        `,
        onLoadingEnd: () => {
          console.log('打印内容已加载');
        },
        onPrintDialogClose: () => {
          console.log('打印对话框已关闭');
        },
      });
    } else {
      console.error('打印元素引用为空');
    }
  };

  return {
    receiptContent,
    handlePrint,
  };
};
